<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择部门</title>
<link rel="stylesheet" type="text/css" href="../../../lib/layui245/css/layui.css"/>
<script src="../../../js/lib/echarts.js"></script>
<script type="text/javascript" src="../../../lib/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../../../lib/layui245/layui.js"></script>
<?php

if (!isset($_SESSION)) {
  session_start();
}

$voteissue=''; 
if (isset($_POST['voteissue'])) {
  $voteissue = $_POST['voteissue'];
}
$_SESSION["MM_VoteIssue"]=$voteissue ;
//echo $_SESSION["MM_VoteIssue"];
?>
</head>
<body>

<div class="layui-main">

  <div class="layui-row layui-col-lg-offset2">
    <div class="layui-col-md2"></div>
    <div class="layui-col-md8 ayui-col-space1">
      <form class="layui-form layui-form-pane"  method="post" action="viewresult.php">      
        <div class="layui-form-item">
          <label class="layui-form-label">部门</label>
          <div class="layui-input-inline">
            <select name="dept" id="dept"   lay-verify="required" lay-filter="dept">
              <option value="0">请选择部门</option>
            </select>
          </div>
          
        </div>
		 <div class="layui-form-item">
          <label class="layui-form-label">调查项目</label>
          <div class="layui-input-inline">
            <select name="voteitem" id="voteitem"   lay-verify="required" lay-filter="voteissue">
              <option value="0">请选择调查项目</option>
            </select>
          </div>
          
        </div>
       
        <div class="layui-form-item">
          <div class="layui-input-inline">            
            <div class="layui-inline"> 
        <a href="javascript:void(0);" class="layui-btn" onclick="cx()"><i class="layui-icon"></i>查询</a>
 
     </div>

          </div>
          
        </div>
      </form>
    </div>
    <div class="layui-col-md2"></div>
  </div>

</div>

<div id="pie1" style="width: 600px;height:400px;"></div>

<script>

var $form;
var form;
var $;
//var areaData="";
layui.use(['form', 'jquery'], function(){
    $ = layui.jquery;
    var layer = layui.layer;

    form = layui.form;
    $form = $('form');
    getDepts();
	getQuestion();

    //get Depts
    function getDepts() {
        $.getJSON("getdept.php", function (data) {
           
            var optionStr = "";
            $.each(data, function (infoIndex, info) {                
                optionStr += '<option value="' + info["DeptID"] + '">' + info["DeptName"] + '</option>';
                //alert(optionStr);
            });
            $form.find('select[name=dept]').append(optionStr);
            form.render();   
			form.on('select(dept)', function (data) {
                //optionStr="";
                var value = data.value;
                //alert(value);
            });        
        });
    }
    
	
	function getQuestion(){
	
		$.getJSON("getquestion.php", function (data) {
           
            var optionStr = "";
			
            $.each(data, function (infoIndex, info) {                
                optionStr += '<option value="' + info["qid"] + '">' + info["question"] + '</option>';
				
                //alert(optionStr);
            });
            $form.find('select[name=voteitem]').append(optionStr);
            form.render();   
			form.on('select(voteitem)', function (data) {
                //optionStr="";
                var value = data.value;
                alert(value);
            });        
        });
	
	
	}   

 form.render();
});

</script>

<script>
function cx(){

	var deptid=$("#dept").val();
	//alert(deptid);
	var voteitem=$("#voteitem").val();
	//alert(voteitem);
	
	
	var myChart1 = echarts.init(document.getElementById('pie1'));
	var arr1=[],arr2=[];
    function arrTest(){
        $.ajax({
              type:"post",
              async:false,
              url:"getitem.php",
              data:"deptid="+deptid+"&voteitemid="+voteitem,
              dataType:"json",
              success:function(result){
                   if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].number);
                          arr2.push(result[i].voteitem);
                      }
                    }
                  }
                })
        return arr1,arr2;
              }
    arrTest();
	
	
    option1 = {
	    title:{
            text:'按投票人数统计',
            top:'bottom',
            left:'center',
            textStyle:{
                fontSize: 14,
                fontWeight: '',
                color: '#333'
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            
        },//提示框，鼠标悬浮交互时的信息提示
        legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data: arr2
        },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
        graphic:{
            type:'text',
            left:'center',
            top:'center',
            style:{
                text:'投票人数统计\n'+'100', //使用“+”可以使每行文字居中
                textAlign:'center',
                font:'italic bolder 16px cursive',
                fill:'#000',
                width:30,
                height:30
            }
        },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
        series: [
            {
                name:'用户统计',//tooltip提示框中显示内容
                type: 'pie',//图形类型，如饼状图，柱状图等
                radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
                //roseType:'area',是否显示成南丁格尔图，默认false
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            textStyle:{color:'#3c4858',fontSize:"18"},
                            formatter:function(val){   //让series 中的文字进行换行
                                return val.name.split("-").join("\n");}
                        },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                        labelLine:{
                            show:true,
                            lineStyle:{color:'#3c4858'}
                        }//线条颜色
                    },//基本样式
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                        textColor:'#000'
                    }//鼠标放在各个区域的样式
                },
                data: arr1,//数据，数据中其他属性，查阅文档
                color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
            },//数组中一个{}元素，一个图，以此可以做出环形图
        ],//系列列表
    };

    myChart1.setOption(option1);
}

</script>

</body>
</html>